import React, { Component } from 'react'
import Home from './Home'
import Recommend from './Recommend'
import Profile from './Profile'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      message: 'hello world',
      counter: 0,
    }
  }

  changeText() {
    this.setState({ message: 'hello world1' })
  }

  increment() {
    this.setState({ counter: this.state.counter + 1 })
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (
      this.state.message !== nextProps.message ||
      this.state.counter !== nextProps.counter
    )
      return true
    else return false
  }

  render() {
    console.log('App render')
    const { message, counter } = this.state

    return (
      <div>
        <h2>
          App-{message} {counter}
        </h2>
        <button onClick={(e) => this.changeText()}>修改文本</button>
        <button onClick={(e) => this.increment()}>+1</button>
        <Home message={message} />
        <Recommend counter={counter} />

        <Profile message={message} />
      </div>
    )
  }
}

export default App
